<template>
  <div>
    <h1>计算属性与方法的区别</h1>
    <div>
      <h2>方法</h2>
      <p>{{reverse()}}+1</p>
      <p>{{reverse()}}+2</p>
    </div>

    <div>
      <h3>计算属性</h3>
      <p>{{sum}} +1</p>
      <p>{{sum}} +2</p>
    </div>
  </div>

</template>

<script>
// 计算属性会缓存，而方法不会，
export default {
  data () {
    return {
      msg: 'hello',
      a: 3,
      b: 5
    }
  },
  methods: {
    reverse () {
      console.log('methods');
      return this.msg.split('').reverse().join()
    }
  },
  computed: {
    sum () {
      console.log('computed');
      return this.a + this.b
    }
  }
}
</script>

<style>
</style>